import React, { useRef, useEffect, useState } from "react";
import flvjs from "flv.js";
import {Radio,Space} from 'antd'

const Monitor = () => {
  // const videoRef = useRef();
  // const [value, setValue] = useState(0);

  // useEffect(() => {
  //   const video = videoRef.current;
  //   if (flvjs.isSupported()) {
  //     // console.log(video)
  //        const player = flvjs.createPlayer({
  //         type: "flv",
  //         isLive: true,
  //         // url: "http://localhost:8000/live/ffmpeg.flv",
  //         url: "http://192.168.10.122/live?app=demo&stream=ck"
  //       });
  //     if (video) {
  //       player.attachMediaElement(videoRef.current);
  //       player.load();

  //       document.body.addEventListener('mousedown', () => {
  //         video.play()
  //       })
  //     }
  //     player.on(flvjs.ErrorTypes.NETWORK_ERROR, (err) => {
  //         console.log('flv.js 网络错误')
  //         console.log(err)
  //       })
  //     } else {
  //     alert("不支持");
  //     return
  //   }
  //   return () => {
  //     video.srcObje = null
  //     video.src = ''
  //   }
  // }, [])
  
  // const onChange = (e) => {
  //   setValue(e.target.value)
  // }
  // return (
  //   <div className="Monitor" style={{
  //     display: "flex"
  //   }}>
  //     <video ref={videoRef} className="video" width="320" height="240" autoPlay playsInline></video>
  //     {/* 监控选择框 */}
  //     <div style={{
  //       marginLeft: 10
  //     }}>
  //       <h3>您可以选择播放</h3>
  //     <Radio.Group onChange={onChange} value={value}>
  //       <Space direction="vertical">
  //         <Radio value={1}>位置1</Radio>
  //         <Radio value={2} disabled>位置2</Radio>
  //         <Radio value={3}>位置3</Radio>
  //       </Space>
  //     </Radio.Group>
  //     </div>
  //   </div>
  // );

  return <div>监控</div>
};

export default Monitor;
